<template>
	<view class="design">
		<u-navbar :placeholder="false" bg-color="#ffffff" :autoBack="true" title="设计师服务"></u-navbar>
		<u-toast ref="uToast"></u-toast>
		<view class="main">
			<view class="flex_box flex_start gap10">
				<view><u-text text="设计师代制作服务"></u-text></view>
				<view @click="showPopo"><u-icon name="question-circle"></u-icon></view>
				<view><u-text :text="money" mode="price" color="red"></u-text></view>
			</view>
			<view class="flex_box mt20 gap10">
				<view class="d-item" :class="{'active': index == checked}" v-for="(item, index) in list" :key="index" @click="chooseType(index)">
					<u-text :text="item.name" color="red" align="center"></u-text>
					<u-text :text="item.sname" color="#999" align="center" size="13"></u-text>
					<view class="checked" v-show="checked == index">
						<u-icon name="checkbox-mark" color="#f31d41"></u-icon>
					</view>
				</view>
			</view>
			<view class="mt20">
				<u-line></u-line>
			</view>
			<view class="mt50 flex_box gap20 flex_start">
				<view class="flex_box w150">
					<u-text text="手机号" size="13"></u-text>
					<!-- <u-icon name="question-circle"></u-icon> -->
				</view>
				<view class="flex_box flex_direction flex_start gap20">
					<view>
						<u-input placeholder="请输入手机号便于设计师联系"
						 v-model="phone" 
						 type="number"
						 fontSize="14px"
						 customStyle="padding-left:0;height:20rpx;width:400rpx;border:none;">
						</u-input>
					</view>
					<view>
						<u-text text="若未填写，请通过主页【我的】-【帮助】点击在线客服，回复'人工'联系 对接资料"
						 color="#999"
						 size="13">
						</u-text>
					</view>
				</view>
			</view>
		</view>
		<view class="pay_choose flex_box flex_direction gap10">
			<view class="flex_box flex_between pay_type">
				<view class="flex_box">
					<u-icon name="weixin-fill" color="#0cbf01" size="24"></u-icon>
					<u-text text="微信支付"></u-text>
				</view>
				<view @click="changeType(1)">
					<u-icon name="checkmark-circle" :color="paytype == 1 ? 'red' : 'gray'" size="24"></u-icon>
				</view>
			</view>
			<view>
				<u-line></u-line>
			</view>
			<!-- #ifdef H5 -->
				<view class="flex_box flex_between pay_type">
					<view class="flex_box">
						<u-icon name="zhifubao" color="blue" size="24"></u-icon>
						<u-text text="支付宝"></u-text>
					</view>
					<view @click="changeType(2)">
						<u-icon name="checkmark-circle" :color="paytype == 2 ? 'red' : 'gray'" size="24"></u-icon>
					</view>
				</view>
			<!-- #endif -->
		</view>
		<view class="pay_btn">
			<u-button @click="toPay" color="#ff344b">立即支付 ￥{{ money }}</u-button>
		</view>
		
		<!-- 弹框 start-->
		<u-popup :show="isShowPopo" @close="closePopo" mode="center" :round="10">
			<view class="notice">
				<view>
					<u-text text="什么是设计师代做服务" size="20" align="center" bold="true"></u-text>
				</view>
				<view class="mt20">
					<text>1、选择「设计师代做」：确定模板支付成功后，您只需要提供宴请信息和相关图片给设计师，即由设计师帮您制作完成精美的邀请函，一个工作日内完成制作。</text>
				</view>
				<view>
					<text>2、未选择「设计师代做」：确定模板支付成功后，可以自行在页面编辑宴请信息和更替图片，制作精美的邀请函。</text>
				</view>
				<view>
					<text>3、代做效果：很多客户都表示物超所值，只需一杯奶茶的费用，就能得到设计师量身定制的精美邀请函(其中包含模板+定制费用)，制作效果又快又好。</text>
				</view>
				<view>
					<text>4、收费透明：无隐藏费用，模板一次购买，终身使用，永不过期，放心购买。</text>
				</view>
				<view>
					<text>5、如需帮助：请在[我的], [帮助], [联系客服]，回复"人工服务"。</text>
				</view>
				<view class="mt50" @click="closePopo">
					<u-text text="我知道了" color="#1877ff" font="30" align="center"></u-text>
				</view>
			</view>
		</u-popup>
		<!-- 弹框 end-->
	</view>
</template>

<script>
	import { payMoney, getDesignPrice } from '@/common/js/http.api.js';
	let that ;
	export default {
		data() {
			return {
				isShowPopo: false,
				phone: '',
				money: 38.8,
				paytype: 1,
				list: [],
				form: {},
				checked: 0,
			}
		},
		onLoad() {
			that = this;
			that.getDesignPriceList();
		},
		methods: {
			closePopo: () => {
				that.isShowPopo = false;
			},
			showPopo: () => {
				that.isShowPopo = true;
			},
			chooseType: (index)=> {
				that.checked = index;
				that.money = that.list[index].price;
				that.form.id = that.list[index].id;
			},
			toPay: async() => {
				// #ifdef MP-WEIXIN
				let codeInfo = await uni.login()
				that.form.code = codeInfo.code
				// #endif
				that.form.type = that.paytype;
				that.form.phone = that.phone;
				that.form.paytype = 1; //设计费
				payMoney(that.form).then(res=>{
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						timeStamp: res.timeStamp + '',
						success(result) {
							that.$refs.uToast.show({
								type: "success",
								message: "购买成功",
								complete(){
									uni.navigateBack();
								}
							});
						},
						fail(result) {
							that.$refs.uToast.show({
								type: "error",
								message: "购买失败",
								complete(){
								}
							});
						},
					})
					// #endif
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			},
			changeType: (type) => {
				that.paytype = type;
			},
			getDesignPriceList: async() => {
				let res = await getDesignPrice();
				that.list = res.data || [];
				that.money = that.list[0].price;
				that.form.id = that.list[0].id;
			}
		}
	}
</script>

<style lang="scss">
	.design {
		background-color: #f2f1f6;
		height: 100vh;
		.main {
			padding: 20rpx;
			background-color: #fff;
			margin: 200rpx 20rpx 0;
			border-radius: 10rpx;
			.d-item {
				background-color: #f5f5f5;
				padding: 20rpx 40rpx;
				position: relative;
				.checked {
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
			.active {
				background: #fdf1f4;
			}
		}
		.pay_choose {
			padding: 20rpx;
			background-color: #fff;
			margin: 20rpx 20rpx 0;
			border-radius: 10rpx;
			.pay_type {
				width:100%;
			}
		}
		.notice  {
			width: 600rpx;
			padding: 20rpx;
			text {
				font-size: 26rpx;
			}
		}
		.pay_btn {
			padding: 20rpx;
			margin-top:100rpx;
		}
	}
</style>
